React Native সেটআপ এবং প্রথম প্রজেক্ট তৈরি

Mobile App Development - রিঅ্যাক্ট নেটিভ (React Native)
262

React Native দিয়ে প্রথম মোবাইল অ্যাপ তৈরি করার জন্য আপনাকে কিছু পদক্ষেপ অনুসরণ করতে হবে। এই পদক্ষেপগুলো অনুসরণ করলে আপনি React Native সেটআপ করতে এবং একটি নতুন প্রজেক্ট তৈরি করতে পারবেন। নিচে প্রতিটি ধাপ বিস্তারিতভাবে ব্যাখ্যা করা হলো।


প্রাথমিক সেটআপ

১. Node.js ইনস্টলেশন

React Native চালানোর জন্য Node.js ইনস্টল করা প্রয়োজন। Node.js-এর সর্বশেষ সংস্করণটি ডাউনলোড এবং ইনস্টল করতে পারেন:

ইনস্টলেশন পরীক্ষা করুন:

node -v
npm -v

এটি আপনার টার্মিনালে Node.js এবং npm (Node Package Manager) এর সংস্করণ দেখাবে, যা React Native প্রজেক্ট তৈরি করতে ব্যবহার হবে।


২. React Native CLI ইনস্টলেশন

React Native প্রজেক্ট তৈরি করতে, React Native CLI (Command Line Interface) ইনস্টল করা দরকার। এর জন্য টার্মিনালে নিচের কমান্ডটি রান করুন:

npm install -g react-native-cli

এটি React Native CLI ইনস্টল করবে, যা আপনি নতুন প্রজেক্ট তৈরি করতে এবং মোবাইল অ্যাপ রান করতে ব্যবহার করবেন।


৩. Android Studio ইনস্টলেশন (Android Development)

Android প্ল্যাটফর্মের জন্য অ্যাপ ডেভেলপ করার জন্য Android Studio ইনস্টল করা প্রয়োজন। নিচের স্টেপগুলো অনুসরণ করুন:

  1. Android Studio ডাউনলোড করুন: Android Studio ডাউনলোড পেজে যান
  2. Android Studio ইনস্টল করুন: ইনস্টলেশনের সময় Android SDK এবং Android Virtual Device (AVD) ইনস্টল করুন।

ইনস্টলেশন পরীক্ষা করুন:

adb --version

এটি নিশ্চিত করবে যে Android SDK ঠিকমতো ইনস্টল হয়েছে এবং adb (Android Debug Bridge) কাজ করছে।


৪. Xcode ইনস্টলেশন (iOS Development)

iOS অ্যাপ ডেভেলপ করার জন্য Xcode ইনস্টল করা প্রয়োজন। Xcode ইনস্টল করতে, MacOS ব্যবহারকারীদের App Store থেকে Xcode ডাউনলোড করতে হবে।

  1. Xcode ডাউনলোড করুন এখান থেকে.
  2. ইনস্টল করার পর, Xcode সেটআপ করুন এবং Xcode Command Line Tools ইনস্টল করুন।

প্রথম React Native প্রজেক্ট তৈরি

১. নতুন প্রজেক্ট তৈরি করা

React Native CLI ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করতে নিচের কমান্ডটি রান করুন:

npx react-native init MyFirstProject

এটি MyFirstProject নামে একটি নতুন React Native প্রজেক্ট তৈরি করবে। আপনার প্রজেক্টের নাম চাইলে পরিবর্তন করতে পারেন।

২. প্রজেক্ট ডিরেক্টরিতে প্রবেশ করা

প্রজেক্ট তৈরি হওয়ার পর, টার্মিনালে নিচের কমান্ডটি রান করে প্রজেক্টের ডিরেক্টরিতে প্রবেশ করুন:

cd MyFirstProject

৩. অ্যাপ রান করা (Android)

এখন আপনি আপনার প্রজেক্টটি Android ডিভাইসে বা ইমুলেটরে রান করতে পারেন। Android Emulator চালু করে, নিচের কমান্ডটি রান করুন:

npx react-native run-android

এটি আপনার অ্যাপটি Android Emulator বা সংযুক্ত ডিভাইসে রান করবে।

৪. অ্যাপ রান করা (iOS)

যদি আপনি iOS প্ল্যাটফর্মে অ্যাপ চালাতে চান এবং MacOS ব্যবহার করেন, তাহলে নিচের কমান্ডটি রান করুন:

npx react-native run-ios

এটি Xcode সিমুলেটরে আপনার অ্যাপটি চালু করবে।


প্রথম React Native কম্পোনেন্ট

React Native প্রজেক্ট তৈরি হওয়ার পর, আপনি প্রজেক্টের App.js ফাইলটি খুলে প্রথম কম্পোনেন্ট তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনার App.js ফাইলটি এমন দেখাবে:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default App;

এটি একটি সাধারণ React Native অ্যাপ যেখানে "Hello, React Native!" একটি সেন্টারড টেক্সট হিসেবে দেখাবে।


সারাংশ

React Native দিয়ে প্রথম প্রজেক্ট তৈরি করতে আপনাকে Node.js, React Native CLI, Android Studio, এবং Xcode (iOS এর জন্য) ইনস্টল করতে হবে। এরপর একটি নতুন প্রজেক্ট তৈরি করে সেটি Android বা iOS ডিভাইসে রান করতে পারেন। React Native এর মাধ্যমে একক কোডবেস ব্যবহার করে মোবাইল অ্যাপ্লিকেশন ডেভেলপ করা সহজ এবং কার্যকরী হয়।

Content added By

React Native ডাউনলোড এবং সেটআপ

246

React Native অ্যাপ্লিকেশন ডেভেলপ করতে প্রথমে আপনার কম্পিউটারে কিছু টুল ইনস্টল করতে হবে। এখানে আমি বিস্তারিতভাবে React Native সেটআপ প্রক্রিয়া বর্ণনা করছি:


প্রথমে যা যা প্রয়োজন:

  1. Node.js এবং npm
    React Native এর জন্য Node.js এবং npm (Node Package Manager) প্রয়োজন। npm হলো Node.js এর সাথে একসাথে ইনস্টল হওয়া একটি প্যাকেজ ম্যানেজার।
  2. Watchman (MacOS এর জন্য)
    Watchman হল একটি ফাইল পরিবর্তন মনিটরিং টুল যা React Native এর জন্য প্রয়োজনীয়। এটি MacOS এ ব্যবহৃত হয়।
  3. Java Development Kit (JDK)
    Android অ্যাপ ডেভেলপ করতে JDK ইনস্টল করতে হবে।
  4. Android Studio
    Android অ্যাপ তৈরি করতে Android Studio ইনস্টল করা প্রয়োজন। এটি Android SDK সহ আসে এবং React Native অ্যাপ ডেভেলপ করতে এর সমর্থন প্রয়োজন।
  5. Xcode (MacOS এর জন্য)
    iOS অ্যাপ তৈরি করতে Xcode প্রয়োজন, তবে এটি শুধুমাত্র MacOS-এ ব্যবহার করা যেতে পারে।

প্রথম ধাপ: Node.js এবং npm ইনস্টল করা

  1. Node.js ডাউনলোড করার জন্য Node.js এর অফিসিয়াল সাইটে যান।
  2. ডাউনলোড এবং ইনস্টল করার পর, টার্মিনালে নিচের কমান্ড দিয়ে নিশ্চিত করুন যে Node.js এবং npm সঠিকভাবে ইনস্টল হয়েছে:
node -v
npm -v

এটি Node.js এবং npm এর সংস্করণ দেখাবে।


দ্বিতীয় ধাপ: Watchman ইনস্টল করা (MacOS এর জন্য)

MacOS ব্যবহারকারীরা Watchman ইনস্টল করতে পারেন Homebrew দিয়ে:

brew install watchman

তৃতীয় ধাপ: Java Development Kit (JDK) ইনস্টল করা

Android অ্যাপ ডেভেলপ করার জন্য JDK প্রয়োজন। JDK ইনস্টল করতে:

  1. Oracle JDK সাইটে যান এবং আপনার সিস্টেমের জন্য উপযুক্ত সংস্করণটি ডাউনলোড করুন।
  2. ইনস্টল করার পর, টার্মিনালে JDK এর সংস্করণ চেক করুন:
java -version

চতুর্থ ধাপ: Android Studio ইনস্টল করা

React Native অ্যাপ তৈরি করার জন্য Android Studio ইনস্টল করতে হবে:

  1. Android Studio এর অফিসিয়াল সাইটে যান এবং ডাউনলোড করুন।
  2. ইনস্টলেশনের সময় Android SDK, Android Virtual Device (AVD) এবং Android Emulator ইনস্টল করার জন্য নিশ্চিত করুন।

পঞ্চম ধাপ: React Native CLI ইনস্টল করা

React Native CLI ইনস্টল করতে, টার্মিনালে নিচের কমান্ডটি রান করুন:

npm install -g react-native-cli

এটি React Native কমান্ড লাইন ইন্টারফেস ইনস্টল করবে।


ষষ্ঠ ধাপ: একটি নতুন React Native প্রোজেক্ট তৈরি করা

React Native প্রোজেক্ট তৈরি করতে নিচের কমান্ড ব্যবহার করুন:

npx react-native init ProjectName

এখানে ProjectName আপনি যেকোনো নাম দিতে পারেন।


সপ্তম ধাপ: Android Emulator অথবা Physical Device এ অ্যাপ রান করা

Android Emulator ব্যবহার করে:

  1. Android Studio এর মাধ্যমে একটি নতুন Android Emulator তৈরি করুন।
  2. এরপর টার্মিনালে নিচের কমান্ড দিন:
npx react-native run-android

Physical Device ব্যবহার করে:

  1. আপনার মোবাইল ডিভাইসে Developer Mode এবং USB Debugging চালু করুন।
  2. মোবাইল ডিভাইসটি USB এর মাধ্যমে আপনার কম্পিউটারের সাথে সংযুক্ত করুন।
  3. এরপর টার্মিনালে নিচের কমান্ড দিন:
npx react-native run-android

এটি আপনার মোবাইল ডিভাইসে অ্যাপটি রান করবে।


অথবা iOS (MacOS এর জন্য):

iOS অ্যাপ চালানোর জন্য Xcode ইনস্টল থাকতে হবে।

  1. Xcode ডাউনলোড করার জন্য Apple Developer সাইটে যান।
  2. Xcode ইনস্টল করার পর, টার্মিনালে নিচের কমান্ড দিন:
npx react-native run-ios

এটি আপনার MacOS ডিভাইসে iOS অ্যাপ রান করবে।


সারাংশ

React Native ডাউনলোড এবং সেটআপ প্রক্রিয়া মোটামুটি সহজ। আপনি Node.js, Android Studio, JDK, এবং Xcode (MacOS এর জন্য) ইনস্টল করে, React Native CLI ব্যবহার করে একটি নতুন প্রোজেক্ট তৈরি করতে পারেন। এরপর অ্যাপটি Android অথবা iOS প্ল্যাটফর্মে রান করানোর জন্য যথাযথ কমান্ড ব্যবহার করতে হবে।

Content added By

Expo CLI এবং React Native CLI এর মধ্যে পার্থক্য

248

Expo CLI এবং React Native CLI উভয়ই React Native অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়, তবে তাদের উদ্দেশ্য, বৈশিষ্ট্য এবং ব্যবহারের ক্ষেত্রে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। নিচে Expo CLI এবং React Native CLI এর মধ্যে পার্থক্য তুলে ধরা হয়েছে:


১. স্টার্টিং সেটআপ এবং কনফিগারেশন

  • Expo CLI:
    Expo CLI আপনাকে সহজ এবং দ্রুত শুরু করার সুবিধা দেয়। Expo CLI দিয়ে শুরু করতে আপনাকে কোনো জটিল কনফিগারেশন করতে হয় না। আপনি Expo টুলকিট ব্যবহার করে আপনার অ্যাপ ডেভেলপ করতে পারেন, যা আপনাকে নেটিভ কোড না লিখেই মোবাইল অ্যাপ তৈরি করার সুযোগ দেয়। Expo-এর সাথে কনফিগারেশন এবং ডিপেনডেন্সি সেশনগুলি হ্যান্ডেল করা হয় এবং এটি ডেভেলপমেন্টের জন্য আরও সুবিধাজনক।
  • React Native CLI:
    React Native CLI দিয়ে শুরু করতে কিছুটা বেশি সময় এবং কনফিগারেশন প্রয়োজন। আপনাকে Xcode (iOS অ্যাপ্লিকেশনের জন্য) এবং Android Studio (Android অ্যাপ্লিকেশনের জন্য) ইন্সটল করতে হয়। আপনি যদি নেটিভ কোড বা কাস্টম ফিচার ব্যবহার করতে চান, তাহলে React Native CLI আপনাকে সেই সুবিধা প্রদান করবে। এটি নেটিভ মডিউল এবং ফিচার ব্যবহারের জন্য উপযুক্ত।

২. ফিচার এবং সীমাবদ্ধতা

  • Expo CLI:
    Expo CLI বেশিরভাগ সাধারণ ফিচার সমর্থন করে এবং আপনাকে অনেক প্রি-বিল্ট কম্পোনেন্ট এবং API দেয়, যেমন ক্যামেরা, লোকেশন, পুশ নোটিফিকেশন ইত্যাদি। তবে, কিছু নেটিভ কাস্টম কোড ব্যবহার বা নেটিভ মডিউল যোগ করার ক্ষেত্রে Expo কিছু সীমাবদ্ধতা নিয়ে আসে। তবে, Expo Managed Workflow আপনার জন্য অনেক সাধারণ কাজ সহজ করে দেয়।
  • React Native CLI:
    React Native CLI আরো ফ্লেক্সিবল এবং কাস্টমাইজেবল। আপনি React Native CLI দিয়ে কোনো নেটিভ কোড লিখতে পারেন এবং প্ল্যাটফর্ম স্পেসিফিক ফিচার অ্যাড করতে পারেন, যেমন কাস্টম প্লাগইন, কাস্টম নেটিভ মডিউল ইত্যাদি। এটি Expo-এর চেয়ে বেশি কাস্টমাইজেশন প্রদান করে, এবং আপনি অনেক সেকেন্ডারি ফিচার যেমন পেমেন্ট গেটওয়ে ইন্টিগ্রেশনও করতে পারেন।

৩. ডিপেনডেন্সি এবং লাইব্রেরি সমর্থন

  • Expo CLI:
    Expo CLI দিয়ে আপনি একে অপরের সাথে ভালভাবে কাজ করে এমন অনেক লাইব্রেরি এবং টুলস ব্যবহার করতে পারেন, তবে কিছু লাইব্রেরি বা API সমর্থন নাও হতে পারে, বিশেষ করে যেগুলি নেটিভ মডিউল ব্যবহার করে। যদি আপনি কোনো থার্ড-পার্টি লাইব্রেরি ব্যবহার করতে চান যা Expo সমর্থন করে না, তবে আপনাকে Expo এর সীমাবদ্ধতা সম্পর্কে ভাবতে হতে পারে।
  • React Native CLI:
    React Native CLI তে আপনি কোনও লাইব্রেরি বা টুলস যুক্ত করতে পারেন, যেগুলি React Native এর সাথে কাজ করতে পারে, এমনকি এমন লাইব্রেরি যা নেটিভ কোডে এপিআই ইন্টিগ্রেশন ব্যবহার করে। আপনি যেকোনো লাইব্রেরি অথবা কাস্টম কোড লিখে আপনার অ্যাপ্লিকেশন কাস্টমাইজ করতে পারেন।

৪. ডেভেলপমেন্ট এবং বিল্ড প্রসেস

  • Expo CLI:
    Expo CLI তে, ডেভেলপমেন্ট এবং বিল্ড প্রসেস অনেক সহজ। আপনাকে শুধুমাত্র কোড লিখে Expo Go অ্যাপ ব্যবহার করে অ্যাপ্লিকেশনটি দেখতে পারেন। Expo CLI আপনাকে ওভার-দ্য-এয়ার আপডেটস এবং হট রিলোড সুবিধা দেয়, যা কোড পরিবর্তন করার সাথে সাথে অ্যাপে পরিবর্তন দেখানোর জন্য সহায়ক। Expo-র মাধ্যমে আপনি নেটিভ বিল্ড তৈরির জন্য Expo এর ক্লাউড সার্ভিস ব্যবহার করতে পারেন।
  • React Native CLI:
    React Native CLI তে, আপনি স্থানীয় বিল্ড এবং ডিপ্লয়মেন্ট করেন। আপনার অ্যাপ্লিকেশনটি টেস্ট করার জন্য আপনাকে Android Studio বা Xcode সেটআপ করতে হবে, এবং অ্যাপ বিল্ড করার জন্য একটি প্রোজেক্ট কনফিগারেশন তৈরি করতে হবে। এটি একটু জটিল হতে পারে তবে এতে আপনি অনেক বেশি কাস্টমাইজেশন এবং নিয়ন্ত্রণ পাবেন।

৫. প্ল্যাটফর্মের সমর্থন

  • Expo CLI:
    Expo মূলত মোবাইল প্ল্যাটফর্ম (iOS, Android) সমর্থন করে এবং ওয়েবেও কিছু ফিচার প্রদান করে। তবে, যদি আপনি কোনো প্ল্যাটফর্ম স্পেসিফিক নেটিভ কোড চান, তবে Expo এর মধ্যে সীমাবদ্ধতা রয়েছে।
  • React Native CLI:
    React Native CLI শুধু মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য নয়, এটি টিভি, ওয়েব, ডেস্কটপ এবং ওয়ার্ক স্টেশন জন্যও সমর্থন প্রদান করতে পারে।

৬. কমিউনিটি এবং সাপোর্ট

  • Expo CLI:
    Expo এর একটি শক্তিশালী কমিউনিটি রয়েছে, এবং এটি মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য বেশিরভাগ সাধারণ ফিচার সমর্থন করে, তবে কিছু নির্দিষ্ট ক্ষেত্রে React Native CLI এর চেয়ে সীমিত থাকতে পারে।
  • React Native CLI:
    React Native এর বৃহৎ এবং সক্রিয় কমিউনিটি রয়েছে, এবং এটি একাধিক প্ল্যাটফর্মের জন্য সমর্থন করে। এখানে কমিউনিটি এবং ডকুমেন্টেশন সবসময় উপলব্ধ।

সারাংশ

ফিচারExpo CLIReact Native CLI
স্টার্টিং সেটআপসহজ, কম কনফিগারেশনএকটু জটিল, অনেক কনফিগারেশন প্রয়োজন
ফিচার সমর্থনপ্রি-বিল্ট কম্পোনেন্ট এবং APIসম্পূর্ণ কাস্টম কোড এবং নেটিভ মডিউল সমর্থন
ডিপেনডেন্সি সমর্থনকিছু লাইব্রেরি সীমাবদ্ধসকল লাইব্রেরি এবং কাস্টম কোড সমর্থন
বিল্ড প্রসেসExpo Go এবং ক্লাউড বিল্ড সার্ভিস ব্যবহারস্থানীয় বিল্ড প্রক্রিয়া, Xcode/Android Studio ব্যবহার
প্ল্যাটফর্ম সমর্থনiOS, Android, কিছু ওয়েব সমর্থনiOS, Android, Web, Desktop, এবং অন্যান্য প্ল্যাটফর্ম
ডেভেলপমেন্টসহজ, দ্রুত, কম কনফিগারেশনউচ্চতর কাস্টমাইজেশন এবং বেশি নিয়ন্ত্রণ

সারাংশ

Expo CLI দ্রুত এবং সহজভাবে মোবাইল অ্যাপ ডেভেলপমেন্টে সহায়ক, বিশেষ করে যদি আপনি নেটিভ কাস্টম কোড না লিখতে চান এবং একটি সহজ প্ল্যাটফর্ম চান। তবে, যদি আপনি নেটিভ কাস্টম কোড বা বেশি কাস্টমাইজেশন চান, তবে React Native CLI হবে উপযুক্ত পছন্দ, যেখানে আপনি আরও ফ্লেক্সিবল এবং কাস্টমাইজেবল সমাধান পেতে পারেন।

Content added By

প্রথম React Native অ্যাপ তৈরি করা

240

React Native দিয়ে প্রথম অ্যাপ তৈরি করা খুবই সহজ এবং এটি আপনাকে দ্রুত মোবাইল অ্যাপ ডেভেলপমেন্টের জগতে প্রবেশ করাতে সাহায্য করবে। নিচে React Native অ্যাপ তৈরি করার পুরো প্রক্রিয়া তুলে ধরা হলো।


ধাপ ১: পরিবেশ প্রস্তুত করা

React Native অ্যাপ ডেভেলপ করতে, প্রথমে আপনার সিস্টেমে কিছু টুল ইনস্টল করতে হবে:

১. Node.js

Node.js React Native প্রোজেক্ট তৈরি করার জন্য প্রয়োজনীয়। এটি ডাউনলোড করতে পারেন Node.js অফিসিয়াল সাইট থেকে.

২. npm বা Yarn

React Native প্রোজেক্ট ম্যানেজমেন্টের জন্য npm বা Yarn ব্যবহার করতে হবে। npm Node.js এর সাথে আসে, তবে আপনি Yarn ইনস্টলও করতে পারেন (যদি না থাকে):

npm install -g yarn

৩. React Native CLI

React Native CLI ইনস্টল করতে, নিচের কমান্ডটি ব্যবহার করুন:

npm install -g react-native-cli

৪. Android Studio (Android Emulator)

Android অ্যাপ ডেভেলপ করতে Android Studio এবং তার Android Emulator ইনস্টল করতে হবে। আপনি এটি Android Studio অফিসিয়াল সাইট থেকে ডাউনলোড করতে পারেন।

৫. Xcode (iOS Emulator)

iOS অ্যাপ তৈরি করতে Xcode ইনস্টল করতে হবে, যা MacOS এ উপলব্ধ। আপনি Xcode ইনস্টল করতে পারবেন Mac App Store থেকে।


ধাপ ২: নতুন React Native প্রোজেক্ট তৈরি করা

React Native CLI ইনস্টল করার পর, আপনি একটি নতুন React Native প্রোজেক্ট তৈরি করতে পারবেন।

১. নতুন প্রোজেক্ট তৈরি

নিচের কমান্ডটি ব্যবহার করে একটি নতুন প্রোজেক্ট তৈরি করুন:

npx react-native init FirstApp

এটি FirstApp নামক একটি নতুন প্রোজেক্ট তৈরি করবে।


ধাপ ৩: অ্যাপ রান করা

React Native প্রোজেক্ট তৈরি করার পর, এখন আপনি অ্যাপ রান করতে পারবেন।

১. Android Emulator এ রান করা

Android Emulator ব্যবহার করে অ্যাপ চালাতে, প্রথমে Android Studio খুলে Emulator চালু করুন এবং তারপর নিচের কমান্ডটি চালান:

cd FirstApp
npx react-native run-android

২. iOS Emulator এ রান করা (MacOS)

MacOS ব্যবহারকারীদের জন্য, Xcode এর মাধ্যমে iOS Emulator চালু করুন এবং নিচের কমান্ডটি ব্যবহার করুন:

cd FirstApp
npx react-native run-ios

ধাপ ৪: অ্যাপের কোড সম্পাদনা

React Native প্রোজেক্ট তৈরি হওয়ার পর, আপনার App.js ফাইলটি খুলে সেখানে কোড লিখে অ্যাপের কন্টেন্ট পরিবর্তন করতে পারবেন। উদাহরণস্বরূপ, প্রথম অ্যাপের জন্য কিছু মৌলিক কোড:

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default App;

এটি একটি সাধারণ Hello, React Native! টেক্সট সহ অ্যাপ তৈরি করবে।


ধাপ ৫: অ্যাপটিতে পরিবর্তন দেখানো

React Native এ হট রিলোড সাপোর্ট করা হয়, যা আপনাকে কোড পরিবর্তন করার সাথে সাথেই অ্যাপটিতে পরিবর্তন দেখতে সাহায্য করে। আপনি যখনই App.js ফাইলে কোনো পরিবর্তন করবেন, অ্যাপটি নিজে থেকে রিফ্রেশ হবে এবং নতুন পরিবর্তন দেখা যাবে।


ধাপ ৬: অ্যাপ বিল্ড করা

যদি আপনি অ্যাপটি প্রডাকশন মোডে ব্যবহার করতে চান, তাহলে অ্যাপটি বিল্ড করতে হবে। Android এর জন্য:

npx react-native run-android --variant=release

iOS এর জন্য:

npx react-native run-ios --configuration Release

এটি আপনার অ্যাপকে প্রডাকশন বিল্ডে তৈরি করবে এবং অ্যাপ স্টোরে আপলোডের জন্য প্রস্তুত করবে।


সারাংশ

এটি ছিল React Native দিয়ে প্রথম অ্যাপ তৈরি করার প্রক্রিয়া। React Native এর মাধ্যমে আপনি একক কোডবেস ব্যবহার করে iOS এবং Android উভয় প্ল্যাটফর্মে অ্যাপ তৈরি করতে পারবেন। প্রথম অ্যাপ তৈরি করার পর আপনি এটি কাস্টমাইজ করে আরও ফিচার যোগ করতে পারেন, যেমন নেটিভ ডিভাইস ফিচার (ক্যামেরা, পুশ নোটিফিকেশন ইত্যাদি)। React Native অ্যাপ ডেভেলপমেন্টের এই প্রক্রিয়া খুবই দ্রুত এবং কার্যকর, যা আপনাকে মোবাইল অ্যাপ ডেভেলপমেন্টের জগতে সহজেই প্রবেশ করাতে সাহায্য করবে।

Content added By

Android এবং iOS Emulator/Simulator সেটআপ

250

React Native অ্যাপ্লিকেশন ডেভেলপ করার জন্য Android Emulator এবং iOS Simulator ব্যবহার করা হয়। এদের সাহায্যে আপনি আপনার মোবাইল অ্যাপ্লিকেশনকে বাস্তব ডিভাইসে রান করার আগে পরীক্ষা করতে পারেন। নিচে Android এবং iOS Emulator/Simulator সেটআপ করার পদক্ষেপ দেওয়া হলো:


১. Android Emulator সেটআপ

১.১. Android Studio ইনস্টল করা

  1. Android Studio ডাউনলোড করুন:
  2. ইনস্টলেশন সম্পন্ন করুন:
    • ডাউনলোড করা ফাইলটি চালু করুন এবং নির্দেশনা অনুসরণ করে Android Studio ইনস্টল করুন।
  3. Android Studio ওপেন করুন:
    • ইনস্টল করার পর Android Studio ওপেন করুন।

১.২. Android Emulator সেটআপ করা

  1. Android Studio তে AVD Manager ওপেন করুন:
    • Android Studio ওপেন করার পর, "AVD Manager" (Android Virtual Device Manager) এ যান। এটি আপনি "Tools" মেনু থেকে পেতে পারেন।
  2. নতুন AVD তৈরি করুন:
    • "Create Virtual Device" বাটনে ক্লিক করুন।
    • আপনার পছন্দমতো ডিভাইস নির্বাচন করুন (যেমন Pixel 4, Nexus 5X ইত্যাদি) এবং "Next" এ ক্লিক করুন।
  3. অপারেটিং সিস্টেম নির্বাচন করুন:
    • এর পর, আপনার পছন্দমতো Android OS নির্বাচন করুন (যেমন Android 11, Android 12) এবং "Download" বাটনে ক্লিক করুন যদি সেটি ডাউনলোড করা না থাকে।
  4. AVD কনফিগার করুন:
    • সিমুলেটর এর অন্যান্য সেটিংস (র‍্যাম, স্টোরেজ ইত্যাদি) কনফিগার করুন এবং "Finish" বাটনে ক্লিক করুন।
  5. Emulator রান করুন:
    • আপনার তৈরি করা AVD নির্বাচন করুন এবং "Play" বাটনে ক্লিক করুন। এর ফলে Android Emulator চালু হবে।

১.৩. React Native অ্যাপ রান করা

  1. React Native প্রজেক্ট ওপেন করুন:
    • আপনার React Native প্রজেক্টে কমান্ড প্রম্পট বা টার্মিনাল ওপেন করুন।
  2. Emulator তে অ্যাপ রান করুন:
    • কমান্ড লিখুন:

      npx react-native run-android
    • এটি আপনার Android Emulator তে অ্যাপ রান করবে।

২. iOS Simulator সেটআপ

২.১. Xcode ইনস্টল করা

  1. Xcode ডাউনলোড করুন:
    • Mac App Store থেকে Xcode ডাউনলোড করুন।
  2. Xcode ইনস্টল করুন:
    • ডাউনলোড করার পর Xcode ইনস্টল করুন।
  3. Xcode ওপেন করুন:
    • Xcode ওপেন করার পর প্রথমবার সেটআপ সম্পন্ন করুন।

২.২. iOS Simulator চালু করা

  1. Xcode থেকে iOS Simulator চালু করুন:
    • Xcode ওপেন করার পর, "Xcode" মেনু থেকে "Open Developer Tool" এ যান এবং Simulator নির্বাচন করুন।
  2. Simulator ডিভাইস নির্বাচন করুন:
    • Simulator চালু হলে, "Hardware" মেনু থেকে আপনি আপনার পছন্দের ডিভাইস নির্বাচন করতে পারেন, যেমন iPhone 13, iPhone SE ইত্যাদি।

২.৩. React Native অ্যাপ রান করা

  1. React Native প্রজেক্ট ওপেন করুন:
    • আপনার React Native প্রজেক্টের ডিরেক্টরি তে টার্মিনাল ওপেন করুন।
  2. iOS Simulator তে অ্যাপ রান করুন:
    • কমান্ড লিখুন:

      npx react-native run-ios
    • এটি আপনার iOS Simulator তে অ্যাপ রান করবে।

এছাড়া কিছু গুরুত্বপূর্ণ পরামর্শ

  • Emulator/Simulator পারফরম্যান্স: Emulator বা Simulator এর পারফরম্যান্স কম্পিউটার বা ল্যাপটপের হার্ডওয়্যার কনফিগারেশন উপর নির্ভর করে। যদি পারফরম্যান্স সমস্যায় পড়েন, আপনি বিভিন্ন সেটিংস পরীক্ষা করে দেখতে পারেন যেমন র‍্যাম বৃদ্ধি করা বা কনফিগারেশন পরিবর্তন করা।
  • কনফিগারেশন সমস্যা: যদি Emulator বা Simulator কাজ না করে, নিশ্চিত করুন যে আপনার ডিভাইস এবং সেটআপের সব সঠিকভাবে কনফিগার করা হয়েছে। এক্ষেত্রে, Android Studio এবং Xcode এর সর্বশেষ আপডেট ইনস্টল করা নিশ্চিত করুন।

সারাংশ

Android Emulator এবং iOS Simulator সেটআপ করার মাধ্যমে আপনি আপনার React Native অ্যাপ্লিকেশনটি মোবাইল ডিভাইসে রান করার আগে সহজেই পরীক্ষা করতে পারবেন। Android Emulator এবং iOS Simulator আপনাকে কোডের পারফরম্যান্স, UI এবং ফিচারগুলির কার্যকারিতা সঠিকভাবে যাচাই করার সুযোগ দেয়।

Content added By
Promotion
NEW SATT AI এখন আপনাকে সাহায্য করতে পারে।

Are you sure to start over?

Loading...